<script setup lang="ts" name="MapMarker">
import { mapProviderKey } from './constant';
import type { MapProvider } from './map-type';

const props = withDefaults(
	defineProps<{
		position: [number, number];
		icon?: string;
		content?: string | HTMLElement;
		title?: string;
		visible?: boolean;
		zIndex?: number;
		offset?: [number, number];
		anchor?: 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
		angle?: number;
		clickable?: boolean;
		draggable?: boolean;
		bubble?: boolean;
		zooms?: [number, number];
		cursor?: 'pointer';
		topWhenClick?: boolean;
		height?: number;
		label?: {
			content: string;
			offset: [number, number];
			direction: 'top' | 'right' | 'bottom' | 'left' | 'center';
		};
		extData?: Record<string, any>;
		finishDraw?: (marker: any) => void;
	}>(),
	{}
);
const mapProvider = inject<MapProvider>(mapProviderKey);

onMounted(() => {
	if (!mapProvider) return;

	mapProvider.onLoaded((isLoaded: boolean) => {
		if (!isLoaded) return;
		mapProvider?.drawMarker(
			{
				...props,
			},
			props.finishDraw
		);
	});
});
</script>

<template>
	<div></div>
</template>

<style lang="scss" scoped></style>
